<template>
  <div class="card">
    <div class="card">
      <moduleHead title="投诉举报人基本信息">
        <div slot="rightCon">
          <!-- <el-button v-if="details.status === 0" @click="recallDialog.visible = true" type="primary" plain size="mini">撤回投诉举报案件</el-button>
          <el-button v-if="details.status === 6 && !details.repeatCheck" @click="reconsiderationDialog.visible = true" type="primary" plain size="mini">复议</el-button> -->
        </div>
      </moduleHead>
      <el-form class="key-value" label-width="130px" v-if="details.complainPersonMainInfo">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系人：">{{ details.complainPersonMainInfo.createUsername || details.complainPersonMainInfo.companyContactName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号：">
              {{ details.complainPersonMainInfo.idNumber }}
            </el-form-item>
            <!-- <el-form-item label="投诉人类型：">
                          {{ details.createType | workOrderCreatorType }}
                        </el-form-item> -->
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码：" label-width="160px">
              <div>{{ details.complainPersonMainInfo.mobile || "-" }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系邮箱：">
              <div>{{ details.complainPersonMainInfo.email }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业名称：">
              <div>{{ details.complainPersonMainInfo.companyName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一社会信用代码：" label-width="160px">
              <div>{{ details.complainPersonMainInfo.socialCreditNumber }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="是否授权：">
          {{ details.complainPersonMainInfo.auth === "true" ? "是" : "否" }}
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="委托人：" v-if="details.complainPersonMainInfo.auth === 'true'">
              <div>{{ details.complainPersonMainInfo.mandator }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="details.complainPersonMainInfo.auth === 'true'">
            <el-form-item label="联系电话：">
              {{ details.complainPersonMainInfo.mandatorPhone }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="通讯地址：">
              <div>{{ details.companyAddress || details.address || "-" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属行业：">
              <div>{{ details.industryType || "-" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>

        <!-- <el-form-item v-if="details.complainPersonMainInfo && details.complainPersonMainInfo.attachmentList.length" label="委托授权书:"></el-form-item>
        <el-form-item v-if="details.complainPersonMainInfo && details.complainPersonMainInfo.attachmentList.length" label="" label-width="0">
          <upload-preview :file-list="details.complainPersonMainInfo.attachmentList" btn-type="text" :showDel="false"></upload-preview>
        </el-form-item> -->
        <el-form-item label="身份证：">
          <upload-preview :file-list="details.clientIdCardList" btnType="text"></upload-preview>
        </el-form-item>
        <el-form-item v-if="details.complainPersonMainInfo && details.complainPersonMainInfo.attachmentList.length" label="委托授权书：">
          <upload-preview :file-list="details.complainPersonMainInfo.attachmentList" btn-type="text" :showDel="false"></upload-preview>
        </el-form-item>
        <!-- <el-form-item v-if="details.wordAttachmentList && details.wordAttachmentList.length" label="" label-width="0">
          <upload-preview :file-list="details.wordAttachmentList" btn-type="text" :showDel="false"></upload-preview>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="card">
      <moduleHead title="投诉对象基本信息"></moduleHead>
      <el-form class="key-value" label-width="130px" v-if="details.complainant">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="投诉对象：">{{ details.complainant.addressDepartmentName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人：">{{ details.complainant.complaintContactName }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系电话：">{{ details.complainant.complaintContactMobile }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事发地：">{{ details.complainant.address }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="card">
      <moduleHead title="案件基本信息"></moduleHead>
      <!-- <el-form-item label="案件名称："></el-form-item> -->
      <el-form class="key-value" label-width="130px" v-if="details.questionMainInfo">
        <el-form-item label="案件类型：" v-if="details.itemDetailName">
          <div>{{ details.itemDetailName }}</div>
        </el-form-item>
        <el-form-item label="案件名称：">
          <div>{{ details.questionMainInfo.name }}</div>
        </el-form-item>
        <el-form-item label="主要诉求：">
          <div v-html="txt2HTML(details.questionMainInfo.mainApply)"></div>
        </el-form-item>
        <el-form-item label="事实理由：">
          <div v-html="txt2HTML(details.questionMainInfo.factReason)"></div>
        </el-form-item>

        <el-form-item label="拖欠账款：">{{ details.questionMainInfo.isArrear ? "是" : "否" }}</el-form-item>
        <template v-if="details.questionMainInfo.isArrear">
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同金额：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.contractAmount | unitMoney }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="欠款金额：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.arrearsAmount | unitMoney }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同协议名称：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.contractName }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签订时间：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.signTime }}</el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="主要违约条款：">{{ details.questionMainInfo.govArrears && details.questionMainInfo.govArrears.defaultClause }}</el-form-item>
        </template>

        <el-form-item v-if="details.questionMainInfo && details.questionMainInfo.wordAttachmentList.length" label="佐证材料：">
          <upload-preview :file-list="details.questionMainInfo.wordAttachmentList" btn-type="text" :showDel="false"></upload-preview>
        </el-form-item>
        <!--  <el-form-item v-if="details.questionMainInfo && details.questionMainInfo.wordAttachmentList.length" label="" label-width="0">
          <upload-preview :file-list="details.questionMainInfo.wordAttachmentList" btn-type="text" :showDel="false"></upload-preview>
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import { txt2HTML, workOrderCreatorType, unitMoney } from "@/utils/filters";
import UploadPreview from "@/components/uploadInput/uploadPreview.vue";

export default {
  name: "CaseBaseMsg",
  components: { UploadPreview },
  mixins: [],
  props: {
    details: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    workOrderCreatorType,
    unitMoney,
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},

  created() {},
  methods: {
    txt2HTML,
  },
};
</script>

<style lang="less" scoped>
.el-form-item__content {
  div {
    word-break: break-all;
  }
}
</style>
